<template>
    <el-dialog v-model="dialogFormVisible" :title='title' width="50%" align-center append-to-body
        :destroy-on-close='true'>
        <div class="dialog-content">
            <el-form :model="formData" label-width="120px" style="max-width: 600px;" :rules="rules"
                :label-position="labelPosition">
                <el-form-item label="主题" prop='message_title'>
                    <el-input v-model="formData.message_title" />
                </el-form-item>
                <el-form-item label="发布部门" prop='message_publish_department' v-if="title == '发布公告' || title == '编辑公告'">
                    <el-select v-model="formData.message_publish_department" placeholder="请选择发布部门">
                        <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="发布人" prop='message_publish_name'>
                    <el-input v-model="formData.message_publish_name" disabled />
                </el-form-item>
                <el-form-item label="接收部门" prop='message_receipt_object' v-if="title == '发布公告' || title == '编辑公告'">
                    <el-select v-model="formData.message_receipt_object" placeholder="请选择接收部门">
                        <el-option v-for="item in allOptions" :key="item.value" :label="item.value"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="公告等级" prop='message_level' v-if="title == '发布公告' || title == '编辑公告'">
                    <el-select v-model="formData.message_level" placeholder="选择公告等级">
                        <el-option label="一般" value="一般" />
                        <el-option label="重要" value="重要" />
                        <el-option label="必要" value="必要" />
                    </el-select>
                </el-form-item>
                <el-form-item label="内容" prop='message_content'>
                    <div style="border: 1px solid #ccc">
                        <!-- wangEditor结构 -->
                        <Toolbar style="border-bottom: 1px solid #ccc;width: 600px;" :editor="editorRef"
                            :defaultConfig="toolbarConfig" :mode="mode" />
                        <Editor style="height: 300px; overflow-y: hidden;width: 600px;" v-model="valueHtml"
                            :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                    </div>
                </el-form-item>

            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="yes">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, reactive, ref, shallowRef } from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { publishMessage, editMessage } from '@/api/message.js'
import {
    getDepartment
} from '@/api/setting'
import {
    bus
} from "@/utils/mitt.js"
import { ElMessage } from 'element-plus'
import { changeUserReadList } from '@/api/dep_msg.js'
import { useMsg } from '@/store/message.js'
import {useUserInfoStore} from '@/store/userInfo.js'
const msgStore = useMsg()
const userStore = useUserInfoStore()
// 标题
const title = ref()

const labelPosition = ref('left')
bus.on('createMessage', (id: number) => {
    if (id == 1) {
        title.value = "发布公告"
        valueHtml.value = ''
        formData.message_title = ''
    }
    if (id == 2) {
        title.value = "发布系统消息"
        valueHtml.value = ''
        formData.message_title = ''
    }
})

// 不包括全体成员
const options = ref([])
// 包括全体成员
const allOptions = ref([])
// 部门数据
const returnDepartment = async () => {
    try {
        const res = await getDepartment()
        if (res.data && Array.isArray(res.data)) {
            let data = res.data.map(item => ({ value: item }))
            let dataPro = [...data]
            dataPro.push({ value: "全体成员" })
            options.value = data
            allOptions.value = dataPro
        }
    } catch (error) {
        console.error('获取部门数据失败:', error)
    }
}
returnDepartment()

bus.on('editMessage', (row: any) => {
    title.value = "编辑公告"
    valueHtml.value = ''
    formData.id = row.id
    formData.message_title = row.message_title
    formData.message_publish_department = row.message_publish_department
    formData.message_publish_name = row.message_publish_name
    formData.message_receipt_object = row.message_receipt_object
    formData.message_level = row.message_level
    formData.message_content = row.message_content
})
bus.on('editSystemMessage', (row: any) => {
    title.value = "编辑系统消息"
    valueHtml.value = ''
    formData.id = row.id
    formData.message_title = row.message_title
    formData.message_publish_name = row.message_publish_name
    formData.message_content = row.message_content
})

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// mode
const mode = ref('default')
// 内容 HTML
const valueHtml = ref()
const toolbarConfig = {
    excludeKeys: []
}
const editorConfig = {
    placeholder: '',
    MENU_CONF: {}
}
// 上传图片，修改 uploadImage 菜单配置
// 需要注意的是，如何去修改参数？
toolbarConfig.excludeKeys = [
    'blockquote',
    'bgColor',
    'color',
    'group-more-style',
    'fontFamily',
    'bulletedList',
    'numberedList',
    'lineHeight',
    'todo',
    'emotion',
    'insertLink',
    'group-video',
    'insertTable',
    'codeBlock',
    'divider',
    'fullScreen',
    'group-image',

    // 排除菜单组，写菜单组 key 的值即可
]

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

// 表单数据
const formData = reactive({
    id: 0,
    message_title: '',
    message_publish_department: '',
    message_publish_name: userStore.name,
    message_category: '',
    message_receipt_object: '',
    message_level: '',
    message_content: '',
})

const rules = reactive({
    message_title: [
        { required: true, message: '请输入公告标题', trigger: 'blur' },
    ],
    message_publish_department: [
        { required: true, message: '请选择发布部门', trigger: 'blur' },
    ],
    message_publish_name: [
        { required: true, message: '请输入发布人', trigger: 'blur' },
    ],
    message_receipt_object: [
        { required: true, message: '请选择的接收对象', trigger: 'blur' },
    ],
    message_level: [
        { required: true, message: '请选择公告等级', trigger: 'blur' },
    ],
    message_content: [
        { required: true, message: '请输入公告内容', trigger: 'blur' },
    ],
})

const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
const emit = defineEmits(['success'])
const yes = async () => {
    if (title.value == '发布公告') {
        formData.message_category = '学校公告'
        formData.message_content = valueHtml.value
        const res = await publishMessage(formData)
        console.log(res)
        if (res.data.status == 0) {
            await changeUserReadList(res.data.id, formData.message_receipt_object)
            msgStore.returnReadList(userStore.id)
            ElMessage({
                message: '发布公告成功',
                type: 'success',
            })
            emit('success')
            dialogFormVisible.value = false
        } else {
            ElMessage.error('发布公告失败')
            dialogFormVisible.value = false
        }
    }
    if (title.value == '编辑公告') {
        formData.message_content = valueHtml.value
        const res = await editMessage(formData)
        msgStore.returnReadList(userStore.id)
        if (res.data.status == 0) {
            ElMessage({
                message: '编辑公告成功',
                type: 'success',
            })
            emit('success')
            dialogFormVisible.value = false
        } else {
            ElMessage.error('编辑公告失败')
            dialogFormVisible.value = false
        }
    }
    if (title.value == '发布系统消息') {
        formData.message_category = '系统消息'
        formData.message_content = valueHtml.value
        const res = await publishMessage(formData)
        if (res.data.status == 0) {
            ElMessage({
                message: '发布系统消息成功',
                type: 'success',
            })
            emit('success')
            dialogFormVisible.value = false
        } else {
            ElMessage.error('发布系统消息失败')
            dialogFormVisible.value = false
        }
    }
    if (title.value == '编辑系统消息') {
        formData.message_content = valueHtml.value
        const res = await editMessage(formData)
        if (res.data.status == 0) {
            ElMessage({
                message: '编辑系统消息成功',
                type: 'success',
            })
            emit('success')
            dialogFormVisible.value = false
        } else {
            ElMessage.error('编辑系统消息失败')
            dialogFormVisible.value = false
        }
    }
}

// 弹窗开关
const dialogFormVisible = ref(false)

// 打开编辑管理员的弹窗
const open = () => {
    dialogFormVisible.value = true
}

defineExpose({
    open
})

onBeforeUnmount(() => {
    bus.all.clear()
})
</script>

<style lang="scss" scoped>
.dialog-content {
    display: flex;
    padding: 20px 30px;
    flex: 1;
    max-height: 800px;
    overflow: auto;
}

.el-dialog__body {
    padding: 0;
}

.el-input {
    width: 240px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
}

.el-form-item {
    margin: 16px;
}

:deep(.w-e-text-container p) {
    margin: 0;
}
</style>